import React from 'react'
import PropTypes from 'prop-types'
// 函数组件
/**
 * 声明式
 * 表达式
 */

function TabTile(props) {
  // props接收父组件传递的参数

  const { title, list, tabIndex, handTabClick } = props
  return (
    <div style={{ display: 'flex' }}>
      <h1>{title}</h1>
      {list.map((item, index) => {
        return (
          <h1
            key={item.cityName}
            className={index === tabIndex ? 'active' : ''}
            onClick={() => {
              console.log('1')
              let city = item.children.filter((v) => v.pid === index + 1)
              console.log('city:', city)
              handTabClick && handTabClick({ city, index })
            }}
          >
            {item.cityName}
          </h1>
        )
      })}
    </div>
  )
}

TabTile.defaultProps = {
  title: '我是默认的标题',
}

TabTile.propTypes = {
  title: PropTypes.string,
}

export default TabTile
